<template>
  <div class="about-page">
    <h1>关于我们</h1>
    <div class="notice-grid">
      <div v-for="(item, index) in notices" :key="item.announce_id" class="notice-item">
        <h2>{{ item.title }}</h2>
        <p>{{ item.content }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const notices = ref([]);

axios.get('http://localhost:8080/MDMS0214_war/announcement/all')
 .then(response => {
      notices.value = response.data;
    })
 .catch(error => {
      console.error('Error fetching data:', error);
    });
</script>

<style scoped>
.about-page {
  font-family: Arial, sans-serif;
  padding: 20px;
  position: relative;
  z-index: 1;
}
.about-page::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7); 
  z-index: -1;
}

.notice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列布局 */
  gap: 20px; /* 项目之间的间距 */
}

.notice-item {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #f9f9f9;
  border-bottom: 3px solid #e0e0e0;
}

.notice-item h2 {
  margin-top: 0;
  color: #333; 
}

h1 {
  text-shadow: 0 0 5px white; 
  color: #333; 
  margin-bottom: 20px; /* 增加底部间距 */
}

p {
  color: #333; 
}
</style>